package com.example.treehole.ui.page.square

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.treehole.LocalSquareViewModel
import com.example.treehole.ui.model.TagSection
import com.example.treehole.ui.theme.darkCyan
import com.example.treehole.ui.theme.postCyan

@Composable
fun SectionCard(tag: TagSection) {
    val squareViewModel = LocalSquareViewModel.current

    Card(
        modifier =
        Modifier
            .padding(8.dp)
            .fillMaxWidth()
            .clickable {
                squareViewModel.updateTag(tag.type)
            },
        elevation = CardDefaults.cardElevation(4.dp),
        shape = RoundedCornerShape(8.dp),
        colors = CardDefaults.cardColors(containerColor = postCyan),
    ) {
        Row(
            modifier = Modifier
                .padding(16.dp)
                .fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            tag.icon?.let {
                Icon(
                    imageVector = it,
                    contentDescription = "Section-${tag.title}",
                    modifier = Modifier.size(40.dp),
                    tint = darkCyan
                )
            }
            Spacer(modifier = Modifier.width(8.dp))
            Text(text = tag.title, fontSize = 16.sp, color = darkCyan)
        }
    }
}
